@import '@devui/theme/styles-var/devui-var.scss';
@import './assets/editor.scss';
@import 'codemirror/lib/codemirror.css';

$font-family: helvetica, arial, 'PingFang', 'Microsoft YaHei', 'Hiragino Sans GB', 'Microsoft JhengHei', sans-serif;

.dp-md-container {
  display: block;
  height: 100%;
  font-family: $font-family;
  font-size: 14px;
  border: 1px solid $devui-dividing-line;
  border-radius: $devui-border-radius;

  .CodeMirror-lines {
    padding: 20px 0;
  }

  .CodeMirror pre {
    padding: 0 20px;
  }

  .CodeMirror pre.CodeMirror-line,
  .CodeMirror pre.CodeMirror-line-like {
    color: $devui-text;
    font-family: $font-family;
  }

  .dp-md-toolbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 52px;
    padding: 8px 0;
    border-bottom: 1px solid $devui-dividing-line;
    background-color: $devui-base-bg;
    border-radius: $devui-border-radius $devui-border-radius 0 0;
  }

  &.dp-md-readonly,
  &.dp-md-editonly {
    .dp-md-content-container {
      position: relative;
      z-index: 0;
    }

    .dp-md-content-container .dp-md-editor,
    .dp-md-content-container .dp-editor-md-preview-container {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
  }

  &.dp-md-readonly .dp-md-content-container .dp-md-editor {
    z-index: -1;
  }

  &.dp-md-readonly .dp-md-toolbar-container {
    opacity: 0.3;
    pointer-events: none;
  }

  &.dp-md-readonly .dp-md-content-container .dp-editor-md-preview-container {
    border-left: none;
  }

  &.dp-md-editonly .dp-md-content-container .dp-editor-md-preview-container {
    z-index: -1;
  }

  .dp-md-content-container {
    display: flex;
    height: calc(100% - 52px);
    min-height: 250px;

    .CodeMirror-scroll {
      padding-top: 5px;
    }

    .dp-md-editor {
      position: relative;
      width: 50%;
      flex-shrink: 0;

      .dp-md-count {
        display: inline-block;
        position: absolute;
        right: 8px;
        bottom: 4px;
        font-size: 12px;
        color: $devui-aide-text;
      }
    }

    .dp-editor-md-preview-container {
      width: 50%;
      flex-shrink: 0;
      padding: 20px;
      border-left: 1px solid $devui-dividing-line;
      border-bottom-right-radius: $devui-border-radius;
      overflow-y: auto;
      background-color: $devui-base-bg;
    }
  }

  .CodeMirror-empty pre.CodeMirror-placeholder.CodeMirror-line-like {
    color: $devui-line;
  }

  input[type='checkbox'] + label {
    margin-left: 6px;
  }
}

.dp-editor-md-preview-container.dp-md-view {
  overflow-y: auto;
}

.dp-md-view {
  pre code {
    display: block;
    overflow-x: auto;
    line-height: 1.5;
  }
}
